<template>
    <div class="big" v-show="skuImage.imgUrl">
        <!-- mousemove鼠标移入时
            mouseenter  移入时显示mask 与maxbox
            mouseleave  移出时隐藏mask 与 maxbox -->
        <div class="preview" 
            @mousemove="getmove($event)" 
            @mouseenter="SetBlock"
            @mouseleave="SetNone"
            >
            <img :src="skuImage.imgUrl" alt="" width="400px" height="400px">
            <div class="mask" ref="mask"></div>
        </div>
        <div class="maxbox" ref="maxbox">
            <img :src="skuImage.imgUrl" alt="" ref="bigbox" width="800px" height="800px">
        </div>
    </div> 
</template>

<script>
export default {
    name:'zoom',
    props:['skuImageList'],
    data() {
        return {
            fleg:false,
            num:0
        }
    },
    mounted() {
        // 获取兄弟组件传入的 img路径
        this.$bus.$on('getSwiper',this.get_Swiper);
    },
   methods: {
        //    鼠标移入时  方法（获取mask 的 left 与  top）
       getmove(event){
        //    获取bigbox的DOM
           let bigbox = this.$refs.bigbox
        //    获取mask的Dom
           let mask = this.$refs.mask;
        //    获取maks移动的左位置  上位置
        //         event.offsetX   获取鼠标离大div的位置
        //         mask.offsetWidth/2  表示mask的一半
        //         left = 鼠标位置（left） - mask的一半
           let left = event.offsetX - mask.offsetWidth/2
           let top =  event.offsetY - mask.offsetHeight/2
        //    如果left 小于0，则等于0
            if(left < 0){
                left = 0
            }
        // 如果left 大于 mask的宽度，则left 等于mask的宽度
            if(left > mask.offsetWidth){
                left = mask.offsetWidth
            }
        // 如果top小于 0 ，则等于0
            if(top < 0){
                top = 0
            }
        // 如果top 大于 maks的高度，则top 等于mask的高度
            if(top > mask.offsetHeight){
                top = mask.offsetHeight
            }
        // 把 left 与 top 赋值给maks与bigbox
            mask.style.left = left + 'px'
            mask.style.top = top +'px'
            bigbox.style.left = -left * 2 +'px'
            bigbox.style.top = -top * 2 +'px'
       },
        //    移入big  则显示  mask与maxbox
       SetBlock(){
           this.$refs.mask.style.display='block'
           this.$refs.maxbox.style.display='block'
       },
        //    移出big  则隐藏  mask 与 maxbox
       SetNone(){
           this.$refs.mask.style.display='none'
           this.$refs.maxbox.style.display='none'
       },
        //    获取兄弟组件imgUrl的路径  并且赋值给this.imgUrl
       get_Swiper(url){
           this.num = url
       }
   },
   computed: {
       skuImage(){
           return this.skuImageList[this.num] || {}
       }
   },
}
</script>

<style scoped lang='less'>

.big{
    border: 1px solid #DFDFDF;
    width: 400px;
    height: 400px;
    overflow: hidden;
     .preview{
        position: relative;
        cursor: pointer;
        width: 400px;
        height: 400px;
        .mask{
            display: none;
            position: absolute;
            pointer-events: none;
            left:0;
            top: 0;
            width: 200px;
            height: 200px;
             background: rgba(19, 196, 43, 0.5);
        }
    }
     .maxbox{
            display: none;
            position: absolute;
            top: 0;
            overflow: hidden;
            left: 410px;
            width: 400px;
            height: 400px;
            border: 1px solid #DFDFDF;
            z-index: 99;
            img{
                position: relative;
                left: 0px;
                top: 0px;
            }
    }
}
 .block{
    display: block;
}  
    
</style>